<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 头部 -->
      <PageTools :show-before="true">
        <template #before>
          <span>{{ totalSize }}条记录</span>
        </template>

        <template #after>
          <el-button
            type="warning"
            @click="exportExcelFn"
          >导出</el-button>
          <el-button
            type="success"
            @click="$router.push('/import')"
          >导入</el-button>
          <el-button
            type="primary"
            @click="addEmployeeFn"
          >新增员工</el-button>
        </template>
      </PageTools>
      <el-card class="body">
        <el-table :data="employeeList">
          <el-table-column
            sortable
            width="200"
            label="序号"
            align="center"
            type="index"
          />
          <el-table-column
            sortable
            width="200"
            label="姓名"
            align="center"
            prop="username"
          />
          <el-table-column width="200">
            <template #default="{row}">
              <img
                v-fixImg="require('@/assets/common/3.jpg')"
                class="staffPhoto"
                :src="row.staffPhoto"
                alt=""
                @click="showCode(row.staffPhoto)"
              >
            </template>
          </el-table-column>
          <el-table-column
            sortable
            width="200"
            label="工号"
            align="center"
            prop="workNumber"
          />
          <el-table-column
            sortable
            width="200"
            label="聘用形式"
            align="center"
            prop="formOfEmployment"
            :formatter="formatterEmployment"
          />
          <el-table-column
            sortable
            width="200"
            label="部门"
            prop="departmentName"
          />
          <el-table-column
            sortable
            width="200"
            label="入职时间"
            align="center"
            prop="timeOfEntry"
          >
            <template slot-scope="{row}">
              <p>{{ row.timeOfEntry|formatDate }}</p>
            </template>
          </el-table-column>
          <el-table-column
            sortable
            idth="150"
            label="账户状态"
            prop="enableState"
            align="center"
          >
            <!-- :formatter="formatterEnableState" -->
            <template slot-scope="{row}">
              <el-switch
                v-model="row.enableState"
                disabled
                :active-value="1"
                :inactive-value="0"
              />
            </template>
          </el-table-column>

          <el-table-column
            label="操作"
            sortable
            fixed="right"
            width="280"
            align="center"
          >
            <template slot-scope="{row}">
              <el-button
                type="text"
                size="small"
                @click="$router.push(`/employees/detail/${row.id}`)"
              >查看</el-button>
              <el-button
                type="text"
                size="small"
              >转正</el-button>
              <el-button
                type="text"
                size="small"
              >调岗</el-button>
              <el-button
                type="text"
                size="small"
                @click="setRole(row.id)"
              >设置角色</el-button>
              <el-button
                type="text"
                size="small"
                @click="editEmployeeFn(row.id)"
              >编辑</el-button>
              <el-button
                v-if="btnName('delUser')"
                type="text"
                size="small"
                @click="delEmployee(row.id)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          small
          layout="prev, pager, next"
          :total="totalSize"
          :page-size="employeePage.size"
          @current-change="handleCurrentChange"
        />
      </el-card>
    </div>
    <employeesDialog ref="employeesDialog" />
    <AssginRule ref="role" :is-show-dialog.sync="isShowAssgin" />
    <el-dialog
      title="二维码"
      :visible="isShowCode"
      @close="isShowCode=false"
    >
      <el-row type="flex" justify="center">
        <canvas ref="qrcode" />
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
// 引用枚举类型的数据
import employeesEnum from '@/assets/constant/employees'
import employeesDialog from './components/employees-dialog.vue'
import AssginRule from './components/assgin-role.vue'
// 引入接口函数
import { getEmployees, delEmployeeById } from '@/api/employees'
// 导出文件的插件
import { export_json_to_excel } from '@/vendor/Export2Excel'
import employee from '@/assets/constant/employees'
import dayjs from 'dayjs'
import qrCode from 'qrcode'

// 引入混入（minix）js插件库
// import myMinix from '@/minix'
export default {
  components: { employeesDialog, AssginRule },
  // 局部使用注册混入功能
  //   mixins: [myMinix],
  data() {
    return {
      employeeList: null,
      employeePage: {
        page: 1,
        size: 5
      },
      totalSize: 0,
      isShowCode: false,
      isShowAssgin: false
    }
  },
  async created() {
    await this.getEmployeeList()
  },
  methods: {
    // btnName(btnName) {
    //   return this.$store.getters.getUserInfo.roles.points.includes(btnName)
    // },
    // ! 设置角色
    async  setRole(id) {
      await this.$refs.role.getRole(id)
      this.isShowAssgin = true
    },
    // ! 生成二维码
    showCode(imgURL) {
      this.isShowCode = true
      // qrCode 用法是调用其中一个 toCanvas的函数
      // 传入二个参数 ：1、canvas dom、2、想要生成的字符串
      // 页面更新，弹窗出现后，显示二维码
      this.$nextTick(() => {
        qrCode.toCanvas(this.$refs.qrcode, imgURL, { width: 250 })
      })
    },
    // ! 导出文件
    async exportExcelFn() {
      // 2. 生成 excel
      //   export_json_to_excel({
      //     header: ['姓名', '年龄', '性别'],
      //     data: [
      //       ['小明', 12, '男'],
      //       ['小红', 13, '女'],
      //       ['小方', 14, '女']
      //     ]
      //   })
      // 发送请求获取后端所有数据
      const { rows } = await getEmployees({ page: 1, size: this.totalSize })
      // 定义要转换的字段
      const dict = {
        姓名: 'username',
        工号: 'workNumber',
        手机号: 'mobile',
        部门: 'departmentName',
        聘用形式: 'formOfEmployment',
        入职日期: 'timeOfEntry',
        转正日期: 'correctionTime'
      }
      // 获取表头信息，通过 Object.keys()将对象的键名转换成数组
      const header = Object.keys(dict)
      // 将获取的数据通过加工获取数组中的对象，转成二维数组的形式
      const newData = rows.map((obj) => this.objToArr(obj, dict))
      // 导出成 excel文件
      export_json_to_excel({ header, data: newData })
    },
    // ! 将对象转成数组
    objToArr(obj, dict) {
      // 设置一个空数组，将加工后的数组，存放到这个变量
      const arr = []
      // 遍历对象，将对象转成数组
      // 通过定义转换字段顺序进行排序
      for (const key in dict) {
        // 获取 dict键名
        const enkey = dict[key]
        let value
        // 加工日期
        if (enkey === 'timeOfEntry' || enkey === 'correctionTime') {
          // 判断 obj的键名是否有值
          if (obj[enkey]) {
            // 获取 obj键值（用 dayjs将日期进行格式化）
            value = dayjs(obj[enkey]).format('YYYY-MM-DD')
          }
        } else if (enkey === 'formOfEmployment') {
          // 加工 聘用形式
          value = employee.map((item) =>
            Number(item.id) === Number(obj.id) ? item.value : ''
          )
        } else {
          // 获取 obj键值
          value = obj[enkey]
        }
        // 将获取obj的键值存到数组中
        arr.push(value || '')
      }
      return arr
    },
    // ! 获取数据渲染页面
    async getEmployeeList() {
      const { rows, total } = await getEmployees(this.employeePage)
      // 渲染的数据
      this.employeeList = rows
      // 数据的总数
      this.totalSize = total
    },
    // ! 分页功能
    // 当前分页功能
    async handleCurrentChange(page) {
      // 将点击的页面赋值到定义的变量中
      this.employeePage.page = page
      // 更新页面数据
      await this.getEmployeeList()
    },
    // ! 删除功能
    async delEmployee(id) {
      // 二次询问是否要删除当前员工的信息
      await this.$confirm('您确定要删除该员工信息吗？')
      // 根据id 发送请求删除员工信息
      await delEmployeeById(id)
      // 更新页面
      await this.getEmployeeList()
      // 提示用户删除成功
      this.$message.success('删除成功')
      if (!this.employeeList.length && this.employeePage.page > 1) {
        this.employeePage.page--
        await this.getEmployeeList()
      }
    },
    // ! 编辑功能，点击显示弹窗
    editEmployeeFn(id) {
      // 通过 ref属性获取子组件信息，并修改其组件内的信息，显示弹窗
      this.$refs.employeesDialog.isShowDialog = true
      // 调用子组件的方法，获取员工详细信息
      this.$refs.employeesDialog.getEmployeeDetail(id)
    },
    // ! 显示弹窗
    addEmployeeFn() {
      this.$refs.employeesDialog.isShowDialog = true
    },
    // ! 使用枚举类型格式化
    formatterEmployment(row, column, cellValue) {
      //   const hireType = [
      //     { id: 1, value: '正式工' },
      //     { id: 2, value: '临时工' }
      //   ]
      // 通过数组的方法 find()查找想要的数据
      const obj = employeesEnum.hireType.find((item) => item.id === cellValue)
      return obj?.value
    }
  }
}
</script>

<style lang="scss" scoped>
.el-card {
  padding-bottom: 20px;
  .staffPhoto {
    width: 180px;
    height: 120px;
    object-fit: contain;
  }
}
::v-deep .el-dialog  {
  .el-dialog__header {
    background-color: royalblue;
    span {
      color: #fff;
    }
  }
  .el-dialog__close{
      color: #fff;
  }
}
.header {
  margin-bottom: 20px;
}
.el-pagination {
  margin-top: 20px;
}
</style>
